<template>
  <div class="simple_tap_performance">
    <table>
      <thead>
        <tr>
          <th>编码</th>
          <th>规格型号</th>
          <th>参数</th>
          <th>参数</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="value in performanceArr" :key="value.id">
          <td>{{ value.id }}</td>
          <td>{{ value.model }}</td>
          <td>{{ value.param1 }}</td>
          <td>{{ value.param2 }}</td>
          <td>{{ value.param3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "SimpleTapPerformance",
  setup() {
    let performanceArr = ref([
      {
        id: "001",
        model: "XH666",
        param1: "1",
        param2: "2",
        param3: "3",
      },
      {
        id: "002",
        model: "XH55",
        param1: "1",
        param2: "2",
        param3: "3",
      },
      {
        id: "003",
        model: "XH776",
        param1: "1",
        param2: "2",
        param3: "3",
      },
    ]);

    return {
      performanceArr,
    };
  },
};
</script>

<style scoped lang='less'>
.simple_tap_performance {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: rgb(235, 235, 235);
  box-sizing: border-box;
  table {
    margin: 15px 12px;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    thead {
      th {
        padding: 0px;
        font-size: 1.1rem;
        border: 1px solid #000;
        background-color: rgb(192, 192, 192);
        box-sizing: border-box;
      }
    }
    tbody {
      tr {
        td {
          padding: 0px;
          font-size: 1rem;
          text-align: center;
          border: 1px solid #000;
          background-color: rgb(255, 255, 255);
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>